<template>
  <div ref="chart"></div>
</template>

<script setup>
import { ref, reactive, onMounted, watch } from 'vue'
import * as echarts from 'echarts'
import { get_CreditInfo } from '../../../../api/api';

const props = defineProps({
  selectedStudentId: {
    type: Number,
    required: false,
    default: 1,
  },
});

// 监听 selectedStudentId 的变化并调用 fetchData
watch(() => props.selectedStudentId, (newValue) => {
  if (newValue) {
    fetchData(newValue); // 传递 newValue 到 fetchData
  }
});

// 获取 token
const getToken = () => {
  return localStorage.getItem('pz_token');
};

// 请求数据并更新状态
const fetchData = async (StudentID) => {
  try {
    const token = getToken();

    if (!token) {
      console.error('未找到 Token');
      return;
    }

    if (!StudentID) {
      console.error('无效的 StudentID:', StudentID);
      return;
    }

    // 设置请求头
    const headers = {
      'Authorization': `JWT ${token}`, // 将 token 作为 Bearer Token 传递
    };

    const response = await get_CreditInfo(StudentID, headers);

    const CreditInfo = response.data.data.data; // 这里获取实际的返回数据

    // console.log('CreditInfo:', CreditInfo);  // 打印 的结构

    // 从 sourseNumberData 中提取学年和门数数据
    const AcademicYear = CreditInfo.map(item => "第" + item.AcademicYear + "学期");
    const EarnedCredits = CreditInfo.map(item => Math.floor(item.EarnedCredits / item.RequiredCredits * 100));
    const RequiredCredits = CreditInfo.map(item => item.RequiredCredits);

    // 更新 ECharts 的配置
    option.yAxis[0].data = AcademicYear;
    option.yAxis[1].data = RequiredCredits;
    option.series[0].data = EarnedCredits;


    const myChart = echarts.init(chart.value)
    myChart.setOption(option)
    window.addEventListener('resize', () => {
      myChart.resize()
    })
  } catch (error) {
    console.error('获取数据失败:', error);
  }
};

const chart = ref();
// 配置 ECharts 的选项
var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6", "#19c6f6"];

const option = reactive({
  grid: {
    top: "0%",
    left: "15%",
    bottom: "10%"
    // containLabel: true
  },
  // 不显示x轴的相关信息
  xAxis: {
    show: false
  },
  yAxis: [
    {
      type: "category",
      inverse: true,
      data: ["大一上", "大一下", "大二上", "大二下", "大三上", "大三下", "大四上", "大四下"],
      // 不显示y轴的线
      axisLine: {
        show: false
      },
      // 不显示刻度
      axisTick: {
        show: false
      },
      // 把刻度标签里面的文字颜色设置为白色
      axisLabel: {
        color: "#fff"
      }
    },
    {
      data: ["0分", "0分", "0分", "0分", "0分", "0分", "0分", "0分"],
      inverse: true,
      // 不显示y轴的线
      axisLine: {
        show: false
      },
      // 不显示刻度
      axisTick: {
        show: false
      },
      // 把刻度标签里面的文字颜色设置为白色
      axisLabel: {
        color: "#fff"
      }
    }
  ],
  series: [
    {
      name: "条",
      type: "bar",
      data: [0, 0, 0, 0, 0, 0, 0, 0],
      yAxisIndex: 0,
      // 修改第一组柱子的圆角
      itemStyle: {
        borderRadius: 20,
        // 此时的color 可以修改柱子的颜色
        color: myColor.dataIndex
        // function (params) {
        //   // params 传进来的是柱子对象
        //   // console.log(params);
        //   // dataIndex 是当前柱子的索引号
        //   return myColor[params.dataIndex];
        // }
      },
      // 柱子之间的距离
      barCategoryGap: 50,
      //柱子的宽度
      barWidth: 10,
      // 显示柱子内的文字
      label: {
        show: true,
        position: "inside",
        // {c} 会自动的解析为 数据  data里面的数据
        formatter: "{c}%"
      }
    },
    {
      name: "框",
      type: "bar",
      barCategoryGap: 50,
      barWidth: 15,
      yAxisIndex: 1,
      data: [100, 100, 100, 100, 100, 100, 100, 100],
      itemStyle: {
        color: "none",
        borderColor: "#00c1de",
        borderWidth: 3,
        borderRadius: 15
      }
    }
  ]
});
onMounted(() => {
  const myChart = echarts.init(chart.value)
  myChart.setOption(option)
  window.addEventListener('resize', () => {
    myChart.resize()
  })
})

</script>

<style lang="less" scoped></style>